<script setup lang="ts">
import {inject} from "vue";

const colGap = inject('colGap')
const rowGap = inject('rowGap')
const record = inject('record')
</script>

<template>
  <a-grid-item :span="24">
    <a-grid :cols="{ xs: 1, sm: 2, md: 5, lg: 5}" :colGap="colGap" :rowGap="rowGap">
      <a-grid-item ><a-card><a-card-meta :title="record.flow?.net_profit.toString()?? '--'" description="净利" class="text-center"></a-card-meta></a-card></a-grid-item>
      <a-grid-item ><a-card><a-card-meta :title="record.flow?.rough_profit.toString()?? '--'" description="毛利" class="text-center"></a-card-meta></a-card></a-grid-item>
      <a-grid-item ><a-card><a-card-meta :title="record.flow?.rough_profit_rate.toString()?? '--'" description="毛利率" class="text-center"></a-card-meta></a-card></a-grid-item>
      <a-grid-item ><a-card><a-card-meta :title="record.flow?.sale_profit.toString()?? '--'" description="销售利润" class="text-center"></a-card-meta></a-card></a-grid-item>
      <a-grid-item ><a-card><a-card-meta :title="record.flow?.bonus.toString()?? '--'" description="销售提成" class="text-center"></a-card-meta></a-card></a-grid-item>
    </a-grid>
  </a-grid-item>
</template>

<style scoped>

</style>